<script setup>
import { ref, onBeforeUnmount, computed } from "vue";
import { showToast } from "vant";
import { useRouter } from "vue-router";
import { exportTxt, getTimeString } from "../utils";
const router = useRouter();

const goods = ref([]);
getGoods();

function getGoods() {
  const goodsString = localStorage.getItem("goods");
  if (goodsString) {
    goods.value = JSON.parse(goodsString);
  }
}

function insEmptyGoods(count = 0) {
  for (let i = 0; i < count; i++) {
    goods.value.push({
      name: "",
      unit: "",
      price: "",
    });
  }
}
window.win_info_back = null;
window.win_goods_back = null;
window.win_goods_submit = function submit() {
  // 检查是否有同名上面
  const pureGoods = goods.value.filter((item) => item.name && item.price);
  const sameGood = new Set(pureGoods.map((it) => it.name));
  if (sameGood.size < pureGoods.length) {
    return showToast("请检查，存在同名商品");
  }
  const str = JSON.stringify(pureGoods);
  localStorage.setItem("goods", str);
  showToast("保存成功");
  goods.value = pureGoods;
  // router.replace({ name: "pick", path: "/" });
};

onBeforeUnmount(() => {
  window.win_goods_submit = null;
});

function addNewRow() {
  insEmptyGoods(20);
}

function removeRow(index) {
  goods.value.splice(index, 1);
}

const showSetting = ref(false);
function settingRow() {
  if (goods.value.length == 0) return;
  showSetting.value = !showSetting.value;
}

function bakGoods() {
  const goodsString = localStorage.getItem("goods");
  var fileName = getTimeString(`备份商品.txt`);
  exportTxt(goodsString, fileName);
}

const showImport = ref(false);
const importTxt = ref("");

function importGoods() {
  showImport.value = true;
}
function confirmImportTxt() {
  try {
    localStorage.setItem("goods", JSON.stringify(JSON.parse(importTxt.value)));
    window.location.reload();
  } catch (err) {
    return showToast("导入失败，不是有效JSON格式");
  }
}
</script>

<template>
  <van-row gutter="20" class="tc tt">
    <van-col span="12">商品名</van-col>
    <van-col span="6">单位</van-col>
    <van-col span="6">价钱（p）</van-col>
  </van-row>
  <van-row v-for="(item, index) in goods">
    <van-col span="2"
      ><div class="fcc">{{ index + 1 }}</div></van-col
    >
    <van-col span="12"
      ><van-field class="bt1" v-model="item.name" placeholder="请输入"
    /></van-col>
    <van-col span="5"
      ><van-field class="bt1 bl0" v-model="item.unit" placeholder="请输入"
    /></van-col>
    <van-col v-if="!showSetting" span="5"
      ><van-field class="bt1 bl0" v-model="item.price" placeholder="请输入"
    /></van-col>
    <van-col v-if="showSetting" span="5"
      ><van-button type="danger" @click="removeRow(index)"
        >删除</van-button
      ></van-col
    >
  </van-row>
  <div class="tb">
    <div class="fa">
      <van-button type="primary" @click="addNewRow">添加新行</van-button>
      <van-button type="danger" @click="settingRow">打开/关闭删除</van-button>
    </div>
    <div class="fa ft1">
      <van-button type="success" @click="bakGoods">备份数据</van-button>
      <van-button type="success" @click="importGoods">导入数据</van-button>
    </div>
  </div>
  <div class="tb">提示：保存只会将每行数据都填完整的行保存下来</div>
  <van-dialog
    v-model:show="showImport"
    title="导入数据"
    show-cancel-button
    @confirm="confirmImportTxt"
  >
    <van-field
      v-model="importTxt"
      type="textarea"
      rows="10"
      label-width="0"
      placeholder="请拷贝导出txt文件内容"
    />
  </van-dialog>
</template>
<style scoped>
.tt {
  padding: 10px 0;
}
.gbt {
  position: absolute;
  top: 10px;
  right: 20px;
}
.bt1 {
  border-left: 1px solid #ccc;
}
.bl0 {
  border-left: 0;
}
.fa {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
}
.ft1 {
  margin-top: 10px;
}
</style>
